<!-- <template>
	chart bar
</template>
<script setup>
	// import { useRoute } from 'vue-router';
	// let route = useRoute()
</script>
<style>
</style> -->
<template>
	<div>
		<div ref="container" id="container"></div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, inject, getCurrentInstance, nextTick } from 'vue'

	let chartType = ref('pie')

	// 获取echart挂载的DOM节点
    let container = ref()
	console.log('container=>ref', container)

	// 定义延时器指针对象，便于组件实例销毁的时候以便清除
    // const timer = ref();
	// 获取当前组件实例,相当于this
    let { proxy }: any = getCurrentInstance()

	// 通过 inject 接收Echarts
    // const Echarts = inject('$echarts');

	const initEchartsOneFn = (chartType) => {
        // echarts初始化
        // const myChart = (Echarts as any).init(container.value);
		let myChart = proxy.$echarts.init(container.value)
        // 或
        // let myChart = proxy.$echarts.init(container.value);
     
        let option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			series: [
				{
				name: 'Access From',
				type: chartType,
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
					show: true,
					fontSize: 40,
					fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: 1048, name: 'Search Engine' },
					{ value: 735, name: 'Direct' },
					{ value: 580, name: 'Email' },
					{ value: 484, name: 'Union Ads' },
					{ value: 300, name: 'Video Ads' }
				]
				}
			]
		}

		myChart.setOption(option)

		// 根据页面大小自动响应图表大小
		window.addEventListener("resize", function () {
			myChart.resize()
		})
    }
    // 等页面渲染完成后再执行
	nextTick(() => {
		console.log('container=>ref', container)
		initEchartsOneFn(chartType.value)
	})

</script>
<style lang="scss" scoped>
#container {
	min-width: 31.25rem;
	min-height: 31.25rem;
	// max-height: 500px;
}
</style>